<template>
    <div class="completePeople container">
        <div class="tabCommonTitle">
            <span>成果主要完成人</span>
            <b>注：完成人最多可填写{{ maxNum }}人，排名前3位的完成人，其投入该项技术研究工作量原则上应占本人同期工作量的30%以上，同时提供支持本人贡献的旁证材料。直接支持核心发明成立的授权发明专利、公开发表的 论文等。</b>
        </div>
        <div class="section">
            <div class="addBTn">
                <!-- <a-button type="primary" @click="addCompletePeople(1)">+添加</a-button> -->
                <a-button :disabled="is_modify=='Y'?false:true" :class="is_modify=='Y'?'':'disabled'" type="primary" @click="operationCompletePeople(1)">+添加</a-button>
            </div>
            <div class="tableList">
                <!-- <a-table :columns="columns" :data-source="data" :pagination="false" align="center">
                    <span slot="operation" slot-scope="text, record">
                        <a>
                            <img style="width:18px;height:18px;margin-right:11px;" @click="operationCompletePeople(2,text, record)" src="@/assets/img/bianji.png" alt="">
                            <img style="width:18px;height:18px;margin-left:11px;" @click="handelDelete(text, record)" src="@/assets/img/shanchu1.png" alt="">
                        </a>
                    </span>
                </a-table> -->
                <a-table :pagination="false" :data-source="data">
                    <a-table-column key="wcrXh" title="排序" data-index="wcrXh" />
                    <a-table-column key="wcrXm" title="姓名" data-index="wcrXm" />
                    <a-table-column key="wcrCsrq" title="出生年月" data-index="wcrCsrq"/>
                    <a-table-column key="wcrZc" title="职务/职称" data-index="wcrZc" />
                    <a-table-column key="wcrGzdw" title="工作单位" data-index="wcrGzdw" />
                    <a-table-column key="action" title="操作">
                        <template slot-scope="text, record">
                            <a>
                                <img style="width:18px;height:18px;margin-right:11px;" @click="operationCompletePeople(2,text, record)" src="@/assets/img/bianji.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;" @click="handelDelete(text, record)" src="@/assets/img/shanchu1.png" alt="">
                            </a>
                        </template>
                    </a-table-column>
                </a-table>
            </div>
        </div>
        <CompletePeople
          ref="completePeople"
          :is_modify="is_modify"
          :type="type"
          :peopleId="peopleId"
          :flag="completePeopleFlag"
          :maxNum="maxNum"
          @handelComplatePeople="handelComplatePeople"
        />
    </div>
</template>

<script>
// 添加主要完成人
import CompletePeople from './completePeople/index';
import {
    // 新增主要完成人
    cxjSbWcrAdd,
    // 完成人列表
    wcrListByCxjId,
    // 删除完成人
    cxjSbWcrDelete
} from '@/api/shenbao'
import { mapActions } from 'vuex'
export default {
    name: '',
    props: ['is_modify'],
    components: {
        CompletePeople
    },
    data(){
        return {
            data: [],
            completePeopleFlag: true,
            peopleId: '',
            type: ''
        }
    },
    computed: {
        maxNum() {
            if (this.$route.query.type === '61') {
                return 6;
            } else {
                return 15;
            }
        }
    },
    mounted(){
        this.onaxios();
    },
    methods: {
        ...mapActions('fillingSteps', ['getStatus']),
        onaxios(){
            wcrListByCxjId({
                cxj_cxj_id: this.$route.query.cxj_cxj_id,
            }).then(res=>{
                let data = res.data;
                if (data.success) {
                    this.data = data.result;
                    this.data.map((item, index) => {
                        item.key = index;
                    })
                } else {
                    this.$message.error(data.message)
                }
            })
        },
        operationCompletePeople(type, text, record){
            if (type==1) {
                if (this.data.length==15) {
                    this.$message.warning("最多只能添加15条")
                } else {
                    this.type = type;
                    this.completePeopleFlag = !this.completePeopleFlag;
                }
            } else {
                this.type = type;
                this.completePeopleFlag = !this.completePeopleFlag;
                this.peopleId = record.id;
            }

        },
        addCompletePeople(type){
            this.type = type;
            this.completePeopleFlag = !this.completePeopleFlag;
        },
        handelComplatePeople(formData, cxj_cxj_id){
            cxjSbWcrAdd(formData, cxj_cxj_id).then(res=>{
                let data = res.data;
                if (data.success) {
                    if (this.type == 1) {
                        this.$message.success('添加成功');
                    } else {
                        this.$message.success('修改成功');
                    }
                    this.getStatus(this.$route.query.cxj_cxj_id)
                    this.$refs.completePeople.handleCancel();
                    this.onaxios();
                } else {
                    this.$message.error(data.message);
                }
            })
        },
        handelUpdate(text, record, type){
            this.type = type;
            this.completePeopleFlag = !this.completePeopleFlag;
            this.peopleId = record.id;
        },
        handelDelete(text, record){
            const self = this;
            this.$confirm({
                content: '确定要删除该项吗？',
                onOk() {
                    let data = {
                      id: record.id,
                      cxj_cxj_id: self.$route.query.cxj_cxj_id
                    }
                    cxjSbWcrDelete(data).then(res=>{
                        let data = res.data;
                        if (data.success) {
                            self.$message.success('删除成功');
                            self.onaxios();
                        } else {
                            self.$message.error(data.message)
                        }
                    })
                },
                cancelText: '取消',
                onCancel() {
                    self.destroyAll();
                },
            });
        },
        destroyAll() {
            this.$destroyAll();
        },
    }
}
</script>
<style lang='less'>
    .anticon-delete {
        color: #CB0C0C;
        font-size: 18px;
        font-weight: bolder;
    }
    .anticon-edit {
        color: #006DC0;
        margin-right: 22px;
        font-size: 18px;
        font-weight: bolder;
    }
</style>
<style lang="less" scoped>
.completePeople {
    .section {
        padding-top: 20px;
        .addBTn {
            text-align: right;
            button {
                width: 88px;
                height: 32px;
                background: #3388EE;
                font-size: 16px;
                font-family: PingFangSCRegular;
                color: #FFFFFF;
                line-height: 22px;
            }
        }
        .tableList {
            margin-top: 21px;
            padding-right: 20px;
        }
    }
}
</style>
import { mapActions } from 'vuex/dist/vuex.common.js';
import { mapActions } from 'vuex/dist/vuex.common.js';

